{% extends "../public/basechild.html" %}

{% block title %} 短信模版管理列表 {% endblock title %}

{% block style%}
<link href="/static/admin/eleme/element.css" rel="stylesheet" />
<link href="/static/admin/eleme/element-extends.css" rel="stylesheet" />
{% endblock %}

{% block content %}
<el-row :gutter="20" id="app" v-cloak>
<el-col :span="24" class="mt mb ov">

	<el-button-group class="fl">
		<el-button type="primary" icon="el-icon-mobile-phone" plain size="small" @click="addTemplate(1)">增加模版分类</el-button>
		<el-button type="info" icon="el-icon-message" plain size="small" @click="addTemplate(2)">增加短信模版</el-button>
		<el-button type="success" icon="el-icon-document" plain size="small" @click="addTemplate(3)">新增模版内容</el-button>
	</el-button-group>

	<el-button type="primary" icon="el-icon-refresh" size="small" class="fr" @click="refresh">刷新面板</el-button>
</el-col>
<el-col :span="24">
	<el-col :span="5">
		<el-menu
			class="el-menu-vertical-demo">
      <div class="block" v-for="m in msList">

			<el-submenu :index="m.id" v-if="m.child===1">
				<template slot="title">
					<i class="el-icon-message"></i>
					<span>${m.title}</span>
				</template>
				<el-menu-item :index="n.id" v-for="n in m.children" @click="templateList(n.id)">
					<i class="el-icon-tickets"></i>
					<span slot="title">${n.title}</span>
				</el-menu-item>
			</el-submenu>

			<el-menu-item :index="m.id" v-if="m.child===0" @click="templateList(m.id)">
				<i class="el-icon-tickets"></i>
				<span slot="title">${m.title}</span>
			</el-menu-item>
      	
      </div>
		</el-menu>
	</el-col>

	<el-col :span="19" v-if="temList.length">
		<div class="block ov" v-for="t,k in temList">
			<el-tag type="info" size="small" class="mb">第 ${(page.pages-1)*page.limits+k+1} 条</el-tag>
			<el-input type="textarea" v-model="t.content" :rows="rows"></el-input>
			<div class="block mt mb right">
				<span class="txt mr"><i class="el-icon-date mr"></i>${times(t.addtime)}</span>
				<el-button type="primary" plain icon="el-icon-edit" size="mini" @click="editContent(t)">确定修改</el-button>
				<el-button type="danger" plain icon="el-icon-delete" size="mini" @click="deleteContent(t.id)"></el-button>
			</div>
		</div>
		<div class="block mt mb center bg-light">
			<el-pagination
				@current-change="currPage"
				:current-page.sync="page.pages"
				:page-size="page.limits"
				layout="total, prev, pager, next"
				:total="total">
			</el-pagination>
		</div>
	</el-col>
</el-col>
<el-col :span="24">
<!-- 新增模版分类 -->
	<el-dialog
		title="新增模版分类"
		:visible.sync="dialog.addmsgtmp"
		:width="dialog.width">
		<div class="block">
			<el-input v-model="tmpOne.title" placeholder="请输入短信模版分类名称"></el-input>
			<div class="block mt mb ov">
				<span class="fl l30">是否需要添加子分类</span>
				<el-radio-group v-model="tmpOne.child" size="mini" class="fl ml">
					<el-radio-button label="1">需要</el-radio-button>
					<el-radio-button label="0">不需要</el-radio-button>
				</el-radio-group>
			</div>
		</div>
		<span slot="footer" class="dialog-footer">
		<el-button @click="dialog.addmsgtmp = false">取 消</el-button>
		<el-button type="primary" @click="addtmp(1)">确 定</el-button>
		</span>
	</el-dialog>
<!-- 新增短信模版 -->
	<el-dialog
		title="新增短信模版"
		:visible.sync="dialog.addtmp"
		:width="dialog.width">
		<div class="block mt mb">
			<el-select v-model="tmpTwo.pid" class="width" placeholder="请选择短信模版所属分类">
				<el-option
					v-for="m in msList"
					:label="m.title"
					:value="m.id"
					v-if="m.children">
				</el-option>
			</el-select>
			<el-input v-model="tmpTwo.title" class="mt" placeholder="请输入短信模版名称"></el-input>
		</div>
		<span slot="footer" class="dialog-footer">
		<el-button @click="dialog.addtmp = false">取 消</el-button>
		<el-button type="primary" @click="addtmp(2)">确 定</el-button>
		</span>
	</el-dialog>
<!-- 新增模版内容 -->
	<el-dialog
		title="新增短信模版内容"
		:visible.sync="dialog.addcnt"
		:width="dialog.width">
		<el-input type="textarea" v-model="tmpCnt" placeholder="请输入短信模版内容" rows="10"></el-input>
		<span slot="footer" class="dialog-footer">
		<el-button @click="dialog.addcnt = false">取 消</el-button>
		<el-button type="primary" @click="addtmp(3)">确 定</el-button>
		</span>
	</el-dialog>
<!--  -->
</el-col>
</el-row>
{% endblock %}

{% block script %}
<script type="text/javascript" src="/static/admin/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/admin/layer/layer.js"></script>
<script type="text/javascript" src="/static/admin/js/h.js"></script>
<script type="text/javascript" src="/static/admin/eleme/vue.js"></script>
<script type="text/javascript" src="/static/admin/eleme/element.js"></script>
<script>
var vm = new Vue({
	el: '#app',
	data: {
		mess: {{ mess|safe }},
		msList: [],
		temList: [],
		total: 0,
		page: {
			id: 0,
			pages: 1,
			limits: 10,
		},
		rows: 4,
		dialog: {
			width: '40%',
			addmsgtmp: false,
			addtmp: false,
			addcnt: false,
		},
		tmpOne: {
			title: '',
			child: 1,
		},
		tmpTwo: {
			title: '',
			pid: '',
		},
		tmpCnt: '',
	},
	methods: {
		addTemplate: function(tp){
			if (tp===1) {
				this.dialog.addmsgtmp = true;
			} else if (tp===2) {
				this.dialog.addtmp = true;
			} else if (tp===3) {
				if (!this.page.id) {
					this.tips('先选择短信模版分类，然后在添加模版内容', 'warning');
					return false;
				}
				this.tmpCnt = '';
				this.dialog.addcnt = true;
			}
		},

		addtmp: function(tp) {
			if (tp===1) {
				if (this.tmpOne.title=='') {
					this.tips('请输入模版名称', 'error');
					return false;
				}
				this.sendTmp(1)
				this.dialog.addmsgtmp = false;
			} else if (tp===2) {
				if (this.tmpTwo.pid == '') {
					this.tips('请选择模版所属分类', 'error');
					return false;
				} else if (this.tmpTwo.title=='') {
					this.tips('请输入模版名称', 'error');
					return false;
				}
				this.sendTmp(2)
				this.dialog.addtmp = false;
			} else if (tp===3) {
				if (!this.page.id) {
					this.tips('先选择需要添加的短信模版，然后在添加模版内容！', 'warning');
					return false;
				} else if (this.tmpCnt === '') {
					this.tips('请选择模版所属分类', 'error');
					return false;
				}
				this.sendTmp(3)
				this.dialog.addcnt = false;
			}
		},

		sendTmp: function(tp){
			let url = '/admin/message/addtmps';
			let json = {};
			if (tp===1) {
				json = this.tmpOne;
			} else if (tp===2) {
				json = this.tmpTwo;
			} else if (tp===3) {
				url = '/admin/message/addcontent';
				json = {
					pid: this.page.id,
					content: this.tmpCnt
				}
			}

			H.ajax(url, json, 'post', (res)=>{
				this.tips(res.data, 'success');
				if (tp!=3) {
					this.refresh();
				} else {
					this.getList();
				}
			})
		},

		templateList: function(id){
			this.page.id = id;
			this.getList();
		},

		getList: function(){
			this.screenLoading(true);
			H.ajax('/admin/message/getmessagetemplate',this.page, 'post', (res)=>{
				this.temList = res.data;
				this.total = res.count;
				this.screenLoading(false);
			})
		},

		editContent: function(row){
			this.confirm('修改提示','修改当前短信模版, 是否继续?','/admin/message/editcontent',row);
			console.log(row)
		},

		deleteContent: function(id){
			this.confirm('删除提示','删除当前短信模版, 是否继续?','/admin/message/delcontent',{id: id});
		},

		confirm: function(tip,msg,url,obj){
			this.$confirm(msg, tip, {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				H.ajax(url, obj, 'post', (res)=>{
					this.tips(res.data);
					this.getList();
				})
			}).catch(() => {});
		},

		currPage: function(val){
			this.page.pages = val;
			this.getList();
		},

		tips: function(msg, tp){
			if (tp) {
				this.$message({
					message: msg,
					type: tp,
					showClose: true
				})
			} else {
				this.$message({
					message: msg,
					showClose: true
				})
			}
		},

		refresh: function(){
			this.msList = [];
			this.temList = [];
			this.screenLoading(true);
			H.ajax('/admin/message/gettmplist',{},'get',(res)=>{
				res.forEach((v)=>{
					if (v.child===1 && v.pid===0) {
						v.children = [];
						res.forEach((s)=>{
							if (s.pid === v.id) {
								v.children.push(s)
							}
						})
						this.msList.push(v);
					} else if (v.pid===0) {
						this.msList.push(v);
					}
				})
				this.screenLoading(false)
			})
		},

		times: function(unix){
			return H.times(unix);
		},

		screenLoading: function(load) {
			const loading = vm.$loading({
				lock: true,
				text: '玩命加载中......',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.5)'
			});
			if (!load) {
				loading.close();
				return false;
			}
		},
	},
	mounted: function(){
		this.mess.forEach((v)=>{
			if (v.child===1 && v.pid===0) {
				v.children = [];
				this.mess.forEach((s)=>{
					if (s.pid === v.id) {
						v.children.push(s)
					}
				})
				this.msList.push(v);
			} else if (v.pid===0) {
				this.msList.push(v);
			}
		})
	},
	delimiters: ['${', '}'],
})
</script>
{% endblock %}